<template>
  <div class="conversation-list">
    <!-- 顶部操作栏 -->
    <div class="conversation-header">
      <h3 class="title">对话历史</h3>
      <div class="actions">
        <button 
          @click="handleNewConversation"
          class="btn-icon"
          title="新建对话"
        >
          <PlusIcon class="w-5 h-5" />
        </button>
        <button 
          @click="handleClearAll"
          class="btn-icon"
          title="清空所有对话"
        >
          <TrashIcon class="w-5 h-5" />
        </button>
      </div>
    </div>

    <!-- 会话列表 -->
    <div class="conversation-items">
      <TransitionGroup name="conversation-list" tag="div">
        <div
          v-for="conversation in conversations"
          :key="conversation.id"
          :class="[
            'conversation-item',
            { active: conversation.id === currentConversationId }
          ]"
          @click="selectConversation(conversation.id)"
        >
        <div class="conversation-info">
          <div class="conversation-title">{{ conversation.title }}</div>
          <div class="conversation-preview">
            {{ getLastMessagePreview(conversation) }}
          </div>
          <div class="conversation-time">
            {{ formatTime(conversation.updateTime) }}
          </div>
        </div>
        <div class="conversation-actions">
          <button 
            @click.stop="handleRenameConversation(conversation.id, conversation.title)"
            class="action-icon"
            title="重命名"
          >
            <PencilIcon class="w-4 h-4" />
          </button>
          <button 
            @click.stop="handleDeleteConversation(conversation.id)"
            class="action-icon"
            title="删除"
          >
            <XMarkIcon class="w-4 h-4" />
          </button>
        </div>
        </div>
      </TransitionGroup>

      <!-- 空状态 -->
      <div v-if="conversations.length === 0" class="empty-state">
        <p>暂无对话历史</p>
        <button @click="handleNewConversation" class="btn-primary">
          开始新对话
        </button>
      </div>
    </div>

    <!-- 重命名对话框 -->
    <div v-if="showRenameDialog" class="rename-dialog-overlay" @click="closeRenameDialog">
      <div class="rename-dialog" @click.stop>
        <h4>重命名对话</h4>
        <input
          v-model="renameTitle"
          @keyup.enter="confirmRename"
          @keyup.escape="closeRenameDialog"
          ref="renameInput"
          class="rename-input"
          maxlength="50"
        />
        <div class="dialog-actions">
          <button @click="closeRenameDialog" class="btn-secondary">
            取消
          </button>
          <button @click="confirmRename" class="btn-primary">
            确定
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, nextTick } from 'vue';
import { PlusIcon, TrashIcon, PencilIcon, XMarkIcon } from '@heroicons/vue/24/outline';

// Props
const props = defineProps({
  conversations: {
    type: Array,
    default: () => []
  },
  currentConversationId: {
    type: String,
    default: null
  }
});

// Emits
const emit = defineEmits([
  'select-conversation',
  'new-conversation',
  'delete-conversation',
  'rename-conversation',
  'clear-all'
]);

// 重命名相关状态
const showRenameDialog = ref(false);
const renameConversationId = ref(null);
const renameTitle = ref('');
const renameInput = ref(null);

// 选择会话
const selectConversation = (conversationId) => {
  emit('select-conversation', conversationId);
};

// 新建会话
const handleNewConversation = () => {
  emit('new-conversation');
};

// 删除会话
const handleDeleteConversation = (conversationId) => {
  if (confirm('确定要删除这个对话吗？此操作不可恢复。')) {
    emit('delete-conversation', conversationId);
  }
};

// 打开重命名对话框
const handleRenameConversation = (conversationId, currentTitle) => {
  renameConversationId.value = conversationId;
  renameTitle.value = currentTitle;
  showRenameDialog.value = true;
  
  // 自动聚焦输入框
  nextTick(() => {
    if (renameInput.value) {
      renameInput.value.focus();
      renameInput.value.select();
    }
  });
};

// 关闭重命名对话框
const closeRenameDialog = () => {
  showRenameDialog.value = false;
  renameConversationId.value = null;
  renameTitle.value = '';
};

// 确认重命名
const confirmRename = () => {
  const trimmedTitle = renameTitle.value.trim();
  if (trimmedTitle && renameConversationId.value) {
    emit('rename-conversation', renameConversationId.value, trimmedTitle);
    closeRenameDialog();
  }
};

// 清空所有对话
const handleClearAll = () => {
  if (confirm('确定要清空所有对话吗？此操作不可恢复。')) {
    emit('clear-all');
  }
};

// 获取最后一条消息预览
const getLastMessagePreview = (conversation) => {
  if (!conversation.messages || conversation.messages.length === 0) {
    return '无消息';
  }
  
  const lastMessage = conversation.messages[conversation.messages.length - 1];
  const preview = lastMessage.content.replace(/\n/g, ' ').trim();
  return preview.length > 30 ? preview.substring(0, 30) + '...' : preview;
};

// 格式化时间
const formatTime = (timeString) => {
  const date = new Date(timeString);
  const now = new Date();
  const diffMs = now - date;
  const diffMins = Math.floor(diffMs / 60000);
  const diffHours = Math.floor(diffMins / 60);
  const diffDays = Math.floor(diffHours / 24);
  
  if (diffMins < 1) return '刚刚';
  if (diffMins < 60) return `${diffMins}分钟前`;
  if (diffHours < 24) return `${diffHours}小时前`;
  if (diffDays < 7) return `${diffDays}天前`;
  
  return `${date.getMonth() + 1}月${date.getDate()}日`;
};
</script>

<style scoped>
.conversation-list {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #f9fafb;
  border-right: 1px solid #e5e7eb;
  dark-mode: selector;
}

:dark .conversation-list {
  background: #111827;
  border-right-color: #374151;
}

.conversation-header {
  padding: 16px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  justify-content: space-between;
  align-items: center;
  dark-mode: selector;
}

:dark .conversation-header {
  border-bottom-color: #374151;
}

.title {
  font-size: 16px;
  font-weight: 600;
  color: #111827;
  dark-mode: selector;
}

:dark .title {
  color: #f3f4f6;
}

.actions {
  display: flex;
  gap: 8px;
}

.btn-icon {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 6px;
  background: #f3f4f6;
  color: #6b7280;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  dark-mode: selector;
}

:dark .btn-icon {
  background: #374151;
  color: #d1d5db;
}

.btn-icon:hover {
  background: #e5e7eb;
  color: #374151;
  dark-mode: selector;
}

:dark .btn-icon:hover {
  background: #4b5563;
  color: #f3f4f6;
}

.conversation-items {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.conversation-item {
  padding: 12px;
  margin-bottom: 4px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  background: transparent;
  dark-mode: selector;
}

.conversation-item:hover {
  background: #f3f4f6;
  dark-mode: selector;
}

:dark .conversation-item:hover {
  background: #374151;
}

.conversation-item.active {
  background: #dbeafe;
  dark-mode: selector;
}

:dark .conversation-item.active {
  background: #1e3a8a;
}

.conversation-info {
  flex: 1;
  min-width: 0;
}

.conversation-title {
  font-weight: 500;
  font-size: 14px;
  color: #111827;
  margin-bottom: 4px;
  dark-mode: selector;
}

:dark .conversation-title {
  color: #f3f4f6;
}

.conversation-preview {
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  dark-mode: selector;
}

:dark .conversation-preview {
  color: #9ca3af;
}

.conversation-time {
  font-size: 11px;
  color: #9ca3af;
  dark-mode: selector;
}

:dark .conversation-time {
  color: #6b7280;
}

.conversation-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s;
}

.conversation-item:hover .conversation-actions {
  opacity: 1;
}

.action-icon {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.05);
  color: #6b7280;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  dark-mode: selector;
}

:dark .action-icon {
  background: rgba(255, 255, 255, 0.05);
  color: #9ca3af;
}

.action-icon:hover {
  background: rgba(0, 0, 0, 0.1);
  color: #374151;
  dark-mode: selector;
}

:dark .action-icon:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #f3f4f6;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: #6b7280;
  dark-mode: selector;
}

:dark .empty-state {
  color: #9ca3af;
}

.empty-state p {
  margin-bottom: 16px;
  font-size: 14px;
}

/* 对话框样式 */
.rename-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.rename-dialog {
  background: white;
  border-radius: 8px;
  padding: 24px;
  width: 400px;
  max-width: 90vw;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  dark-mode: selector;
}

:dark .rename-dialog {
  background: #1f2937;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.rename-dialog h4 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: #111827;
  dark-mode: selector;
}

:dark .rename-dialog h4 {
  color: #f3f4f6;
}

.rename-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  margin-bottom: 16px;
  dark-mode: selector;
}

:dark .rename-input {
  background: #374151;
  border-color: #4b5563;
  color: #f3f4f6;
}

.rename-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  dark-mode: selector;
}

:dark .rename-input:focus {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* 按钮样式 */
.btn-primary {
  padding: 8px 16px;
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.2s;
}

.btn-primary:hover {
  background: #2563eb;
}

.btn-secondary {
  padding: 8px 16px;
  background: #f3f4f6;
  color: #374151;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.2s;
  dark-mode: selector;
}

:dark .btn-secondary {
  background: #374151;
  color: #d1d5db;
}

.btn-secondary:hover {
  background: #e5e7eb;
  dark-mode: selector;
}

:dark .btn-secondary:hover {
  background: #4b5563;
}

/* 会话列表过渡动画 */
.conversation-list-enter-active,
.conversation-list-leave-active,
.conversation-list-move {
  transition: all 0.3s ease;
}

.conversation-list-enter-from {
  opacity: 0;
  transform: translateX(-20px);
}

.conversation-list-leave-to {
  opacity: 0;
  transform: translateX(20px);
}

.conversation-list-leave-active {
  position: absolute;
  width: calc(100% - 16px);
}

/* 滚动条样式 */
.conversation-items::-webkit-scrollbar {
  width: 6px;
}

.conversation-items::-webkit-scrollbar-track {
  background: transparent;
}

.conversation-items::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
  dark-mode: selector;
}

:dark .conversation-items::-webkit-scrollbar-thumb {
  background: #4b5563;
}

.conversation-items::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
  dark-mode: selector;
}

:dark .conversation-items::-webkit-scrollbar-thumb:hover {
  background: #6b7280;
}
</style>
